import 'package:card_swiper/card_swiper.dart';
import 'package:cbec_app/utils/ThemeConfig.dart';
import 'package:flutter/material.dart';

///自定义fraction 指示器
class CustomFractionSwiper extends SwiperPlugin {
  const CustomFractionSwiper(
      {this.color,
      this.fontSize = 13.0,
      this.key,
      this.activeColor,
      this.activeFontSize = 17.0,
      this.bgColor});

  ///color ,if set null , will be Theme.of(context).scaffoldBackgroundColor
  final Color? color;

  ///color when active,if set null , will be Theme.of(context).primaryColor
  final Color? activeColor;

  ////font size
  final double fontSize;

  ///font size when active
  final double activeFontSize;

  ///背景色
  final Color? bgColor;

  final Key? key;

  @override
  Widget build(BuildContext context, SwiperPluginConfig? config) {
    final themeData = Theme.of(context);
    final activeColor = this.activeColor ?? ThemeConfig.mainTextColor;
    final color = this.color ?? ThemeConfig.sectionTextColor;

    if (Axis.vertical == config!.scrollDirection) {
      return Column(
        key: key,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            '${config.activeIndex + 1}',
            style: TextStyle(color: activeColor, fontSize: activeFontSize),
          ),
          Text(
            '/',
            style: TextStyle(color: color, fontSize: fontSize),
          ),
          Text(
            '${config.itemCount}',
            style: TextStyle(color: color, fontSize: fontSize),
          )
        ],
      );
    } else {
      if (bgColor != null) {
        return Container(
            key: key,
            padding: EdgeInsets.only(left: 8,right: 8,top: 3,bottom: 3),
            decoration: BoxDecoration(
              color: bgColor,
              borderRadius:const BorderRadius.all(Radius.circular(20))
            ),
            child: Text(
              '${config.activeIndex + 1}/${config.itemCount}',
              style: TextStyle(
                  color: Colors.white,
                  fontSize: fontSize,
                  fontWeight: FontWeight.w500),
            ),
          );
      } else {
        return Row(
          key: key,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Container(
              transform: Matrix4.translationValues(0, 2, 0),
              child: Text(
              '${config.activeIndex + 1}',
              style: TextStyle(
                  color: activeColor,
                  fontSize: activeFontSize,
                  fontWeight: FontWeight.bold),
            ),
            ),
            Text('/',
                style: TextStyle(
                    color: color,
                    fontSize: fontSize,
                    fontWeight: FontWeight.w500)),
            Text(
              '${config.itemCount}',
              style: TextStyle(
                  color: color,
                  fontSize: fontSize,
                  fontWeight: FontWeight.w500),
            )
          ],
        );
      }
    }
  }
}
